zan-upload

zan-upload

这是一个图片上传组件

使用方法

微商城

获取 token 接口由原来的 /dock/token.json 替换成以下几种获取 token 的方式：

1. 微商城公开图片上传：/shop/pubImgUploadToken.json，会在我的文件中显示，图片上传常用接口
2. 微商城公开音频上传：/shop/pubAudioUploadToken.json，会在我的文件中显示，音频上传常用接口
3. 存储公开图片上传：/storage/pubImgUploadToken.json，不会在我的文件中显示，如店铺Logo
4. 存储私有图片上传：/storage/priImgUploadToken.json，不会在我的文件中显示，如店铺认证

具体采用哪个接口可以根据各业务的需求，更多信息可以参考 http://doc.qima-inc.com/pages/viewpage.action?pageId=15168143

非微商城（如美业、餐饮等）

后端需要自己封装token接口

代码演示

:::demo 基础用法

import Upload from 'zan-upload';

class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }

    uploadError(data) {
        console.log(data);
    }

    renderTrigger() {
        return <span></span>;
    }

    render() {
        return <Upload
            maxSize={8 * 1000 * 1000}
        	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
        	onSuccess={this.uploadSuccess} onError={this.uploadError} />;
    }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

:::demo 仅上传本地图片

import Upload from 'zan-upload';

class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }

    renderTrigger() {
        return <span></span>;
    }

    render() {
        return <Upload 
        	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
        	trigger={() => <span>xxx</span>} 
        	onSuccess={this.uploadSuccess} localOnly />;
    }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

:::demo 素材银行

import Upload from 'zan-upload';

class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }

    renderTrigger() {
        return <span></span>;
    }

    render() {
        return <Upload 
        	maxAmount={1} 
        	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
        	materials
            imgcdn="https://img.yzcdn.cn"
            mediaListUrl="mock/upload-mediaList.json"
        	onSuccess={this.uploadSuccess} />;
    }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

:::demo 上传音频

import Upload from 'zan-upload';

class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }

    renderTrigger() {
        return <span></span>;
    }

    render() {
        return <Upload 
            tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
            materials
            type="voice"
            tokenUrl="https://materials.youzan.com/shop/pubAudioUploadToken.json"
            imgcdn="https://img.yzcdn.cn"
            mediaListUrl="mock/upload-mediaList.json"
            onSuccess={this.uploadSuccess} />;
    }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

:::demo 不需要额外传参数，通过tokenUrl修改token

import Upload from 'zan-upload';

class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }

    renderTrigger() {
        return <span></span>;
    }

    render() {
        return <Upload 
            maxAmount={1} 
            tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
            materials
            imgcdn="https://img.yzcdn.cn"
            mediaListUrl="mock/upload-mediaList.json"
            onSuccess={this.uploadSuccess} 
            tokenUrl="https://materials.youzan.com/shop/pubImgUploadToken.json" />;
    }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

:::demo 额外传递业务参数，通过onGetToken回调函数修改token

import Upload from 'zan-upload';

class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }

    renderTrigger() {
        return <span></span>;
    }

    getTokenHandler() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve('xxxx');
            }, 100);
        });
    }

    render() {
        return <Upload 
        	maxAmount={1} 
        	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
        	materials
            imgcdn="https://img.yzcdn.cn"
            mediaListUrl="mock/upload-mediaList.json"
        	onSuccess={this.uploadSuccess} 
        	onGetToken={this.getTokenHandler} />;
    }
}

ReactDOM.render(
    <Simple />
    , mountNode
);

:::

API

参数	说明	类型	默认值	是否必填
type	上传类型，默认为image，音频上传为voice	string	'image'	否
kdtId	店铺id	number	0	否
prefix	前缀命名空间	string	'rc'	否
className	扩展类名	string	''	否
inline	是否行内属性	boolean	false	否
maxSize	图片大小限制，单位为b	number	1024 * 1024	否
maxAmount	图片数量限制，0为不限制，1为只支持单文件	number	0	否
silent	是否开启静默模式，不会提示成功/失败	boolean	false	否
tips	提示文案	string	''	否
localOnly	是否只支持本地图片	boolean	false	否
materials	是否支持素材银行	boolean	false	否
imgcdn	自定义素材银行图片cdn域名，默认为_global.url.imgqn_	string	''	否
categoryId	固定categoryId，不显示分组列表	any	null	否
onSuccess	上传成功回调，返回的是一个数组	function	noop	否
onError	上传失败回调	function	noop	否
onProgress	上传进度	function	noop	否
onGetToken	自定义获取token回调，需要返回一个promise，如 resolve(token)	function	内置getToken	否
filterFiles	过滤文件，支持同步和promise的方式	function	noop	否
accept	支持文件类型	string	'image/gif, image/jpeg, image/png'	否
scope	图片空间名	string	'kdt_img'	否
auto	是否自动弹出	boolean	false	否
timeout	上传超时毫秒数	number	60 * 1000	否
mediaListUrl	自定义素材银行列表url [GET]	string	'//materials.youzan.com/media/mediaList.json'	否
categoryListUrl	自定义素材银行分组列表url [GET]	string	'//materials.youzan.com/category/categoryList.json'	否
fetchUrl	自定义提取网络图片url [POST]	string	''	是
onFetchUrl	自定义提取图片的处理函数，需要返回一个promise	func	undefined	否
tokenUrl	自定义上传图片token的url [POST]	string	''	是
uploadUrl	自定义上传图片url [POST]	string	'//upload.qbox.me'	否
triggerClassName	重写trigger样式	string	'rc-upload-trigger'	否

更新日志

4.4.1 (2017-10-30)

• 去掉 tokenUrl 和 fetchUrl 的默认值，这两个属性变更为必填项
• 增加文件上传前的类型判断，防止修改文件名绕过input的类型过滤
• 修复删除图片的 bug

4.5.1 (2017-10-31)

• 升级的打包输出，只输出 lib 和 dist

4.5.2 (2017-11-01)

• 手动引入 file-type，防止 es6 代码不编译

4.5.3 (2017-11-10)

• 修复无法检测文件类型导致文件上传不了的问题